<template>
  <view style="background-color: #F5F5F5; height: 100vh;">
    <!-- 自定义导航栏 -->
    <navbar name="记录血糖"></navbar>
    <u-tabs bar-width="90" :height="80" inactive-color="#4A4A4A" :list="selectorList" active-color="#2EA7E0"
      :current="current" @change="change"></u-tabs>

    <!-- 仪表盘盒子 -->
    <view class="instrument-box">
      <view class="control-box">
        <!-- 减号 -->
        <view class="two-but" @tap="clickSubtract" @longtap="longtapsubtract" @touchstart='touchstart'
          @touchend="touchEnd">
          <image src="http://static.bsyjk.cn/subtractIcon/1ECA0F07F41D483C8491796A58E673FF.png" style="width: 44upx;height: 44upx;" mode=""></image>
        </view>
        <view class="dial-plate">
          <view class="pointer-img" :style="[{transform:'rotate(' + rotate +'deg)'}]">
            <image src="http://static.bsyjk.cn/pointerIcon/0AAC3E3AF49C4285B3F8D8202FE4A446.png" style="width: 76upx;height: 76upx;" mode=""></image>
          </view>

          <!-- 数值 -->
          <view class="numerical-box">
            <view class="big-num">
				<input type="digit" style="width: 157rpx;height: 61upx;line-height: 61upx; border: 1px solid #ccc;margin: 0 auto ;border-radius: 10upx;"
				 placeholder="请输入"
				 :value="bloodGlucoseNum" @input="inputBlood"  maxlength="4" />
              <!-- {{bloodGlucoseNum}} -->
            </view>
            <view class="unit-text">
              mmol/L
            </view>
          </view>

        </view>
        <!-- 加号 -->
        <view class="two-but" @longtap="longtapadd" @tap="clickAdd" @touchstart='touchstart' @touchend="touchEnd">
          <image src="http://static.bsyjk.cn/plusIcon/64CCCE3A54C647C9A8A27E66E7264FC1.png" style="width: 44upx;height: 44upx;" mode=""></image>
        </view>
      </view>
    </view>
    <!-- 选择时间 -->
	<view class="weui-flex">
		<view>
			<view class="placeholder titleView">
				选择时间
			</view>
		</view>
		<view class="weui-flex__item">
			<view class="placeholder toolView" :class="value1==''?'':'colorA4'" @click="handleTap('picker1')">
				{{value1==''?label:value1.replace(/-/g,".")}}
			</view>
		</view>
	</view>
	<button class="relevance-btn" type="default" :disabled="disabled||bloodGlucoseNum == 0||value1==''?true:false"
		:class="bloodGlucoseNum == 0||value1==''?'disabledbg':''" @tap="addRecord(bloodGlucoseNum,value1)">保存</button>
	<!-- 日期选择 -->
	<lb-picker ref="picker1" v-model="value1" :format="curFormat" display-format="YYYY-MM-DD-HH-mm-ss" mode="dateSelector"  @change="handleChange" @confirm="handleConfirm"
		@cancel="handleCancel" start-date="2021-1-1" :end-date="endTime">
	</lb-picker>
	<!-- end -->
   <!-- <view class="choose-time-box">
      <view class="left-text">
        选择时间
      </view>
      <view class="right-box" @tap.stop="chooseTime()">
        <view class="please-choose-time">
          请选择时间
        </view>
        <view class="right-img">
          <image src="../../static/my/h-jt.png" style="width: 18upx; height: 30upx;" mode=""></image>
        </view>
      </view>
    </view> -->
  </view>
</template>

<script>
	import dayjs from '@/common/utils/day/day.js'
	import lbPicker  from '@/pages/subpackage/components/lb-picker/index';

import uTabs from "@/uview-ui/components/u-tabs/u-tabs.vue"

  export default {
    components: {
      lbPicker,
      uTabs
    },
    data() {
      return {
		 curFormat: 'YYYY-MM-DD HH:mm:ss',
		 disabled:false,
		 endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
		 indicId: '', //指标id
		 label:'请选择时间',
		value1: '',
        selectorList: [{
          name: '空腹'
        }, {
          name: '早餐后'
        }, {
          name: '午餐前',
          // count: 5
        }, {
          name: '午餐后',
        }, {
          name: '晚餐前',
        }, {
          name: '晚餐后',
        }, {
          name: '凌晨',
        }],
        current: 0,
        rotate: 51,
        timeShow: false, //时间弹框

        bloodGlucoseNum: '6.0', //血糖值
        adds: false, //是否开始加加

        touchE: '', //按钮松开的时间
        touchT: '', //按钮开始按压的时间
      };
    },
	onLoad(e){
		this.indicId = e.indicId ? e.indicId : 2;
	},
    methods: {
		inputBlood(e){
			console.log(e)
			let value =e.detail.value*1;
			if(value>36){
				uni.showToast({
				    title: '不可大于36',
					icon:'none',
				    duration: 2000
				});
			}else{
				this.rotate = value*8;
				this.bloodGlucoseNum = value
			}

		},
		// 血糖记录
		addRecord(blood, time) {
			this.disabled = true;
			let _this = this,
				fdata = {
					// sugarValue:blood,
					deviceType:'BLOOD_SUGAR',
					recordTime: dayjs(time).format('YYYY-MM-DD'),
					createTime:time,
					userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId,
					inputType:1,//1手动 2设备
					timeSlot:this.current+1,//血糖时段
					mac:'',//设备mac
					deviceId:'',//设备id
					healthDataId:'',
					healthData:JSON.stringify({sugarValue:blood}),

				};
			// return
			this.$api.post(global.apiUrls.addRecord, fdata).then(res => {
				if (res.data.code == 1000) {
					_this.bloodGlucoseNum = 0
					_this.value1=''
					uni.showToast({
						title: res.data.message,
						duration: 2000
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 2000);
				} else {
					uni.showToast({
						title: res.data.message,
						icon: "none",
						duration: 2000
					});
				}
				_this.disabled = false;
			}).catch(err => {
				_this.disabled = false;
			})
		},
		// // 血糖记录
		// userSugar(blood, time) {
		// 	let _this = this,
		// 		fdata = {
		// 			sugarValue:blood,
		// 			indicId: this.indicId,
		// 			recordTime: time,
		// 			userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId,
		// 			timeSlot:this.current+1
		// 		};
		// 	// return
		// 	this.$api.post(global.apiUrls.userSugar, fdata).then(res => {
		// 		if (res.data.code == 1000) {
		// 			uni.showToast({
		// 				title: res.data.message,
		// 				duration: 2000
		// 			});
		// 			setTimeout(() => {
		// 				uni.navigateBack({
		// 					delta: 1
		// 				});
		// 			}, 2000);
		// 		} else {
		// 			uni.showToast({
		// 				title: res.data.message,
		// 				icon: "none",
		// 				duration: 2000
		// 			});
		// 		}
		// 	}).catch(err => {})
		// },
		handleTap(name) {
			this.$refs[name].show()
		},
		handleChange(e) {
			console.log('change::', e)
		},
		handleConfirm(e) {
			console.log(e, 123)
		},
		handleCancel(e) {
			console.log('cancel::', e)
		},
      //切换类型
      change(index) {
        this.current = index;
      },
      //点击加号
      clickAdd() {
        if (this.bloodGlucoseNum < 36 && this.touchE - this.touchT < 350) {
          this.rotate = this.rotate * 1 + 0.75;
          this.bloodGlucoseNum = (this.bloodGlucoseNum * 1 + 0.1).toFixed(1);
        }
        console.log(this.rotate)
      },
      //点击减号
      clickSubtract() {
        if (this.bloodGlucoseNum > 0 && this.touchE - this.touchT < 350) {
          this.rotate = this.rotate * 1 - 0.75;
          this.bloodGlucoseNum = (this.bloodGlucoseNum * 1 - 0.1).toFixed(1);
        }
        console.log(this.rotate)
      },
      //手指长按加号
      longtapadd() {
        console.log('长按佳佳')
        this.adds = true;
        this.numAdd();
      },
      //手指长按减号
      longtapsubtract() {
        console.log('长按减减')
        this.adds = true;
        this.numSubtract();
      },
      //按钮开始按压的时间
      touchstart() {
        this.touchT = new Date().getTime();
      },
      //手指离开屏幕
      touchEnd() {
        if (this.adds == true) {
          console.log('离开了')
          this.adds = false;
          this.touchE = new Date().getTime();
          clearTimeout(this.timer);
        }
      },
      //数据自动加加
      numAdd() {
        if (this.adds == true && this.bloodGlucoseNum < 36) {
          // 开始倒计时
          this.timer = setInterval(() => {
            if (this.adds == true && this.bloodGlucoseNum < 36) {
              this.rotate = this.rotate * 1 + 0.75;
              this.bloodGlucoseNum = (this.bloodGlucoseNum * 1 + 0.1).toFixed(1);
            } else {
              clearTimeout(this.timer);
              return;
            }
          }, 50);
        }
      },
      //数据自动减减
      numSubtract() {
        if (this.adds == true && this.bloodGlucoseNum > 0) {
          // 开始倒计时
          this.timer = setInterval(() => {
            if (this.adds == true && this.bloodGlucoseNum > 0) {
              this.rotate = this.rotate * 1 - 0.75;
              this.bloodGlucoseNum = (this.bloodGlucoseNum * 1 - 0.1).toFixed(1);
            } else {
              clearTimeout(this.timer);
              return;
            }
          }, 50);
        }
      },
      //显示时间选择
      chooseTime() {
        this.timeShow = !this.timeShow;
      }
    }
  }
</script>

<style lang="scss" scoped>
	@import "./record.scss";
  .instrument-box {
    width: 750upx;
    height: 730upx;
    background-color: #F5F5F5;
    padding: 1upx 0upx;

    //控件所有值
    .control-box {
      width: 750upx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0upx 66upx;
      margin-top: 144upx;

      .two-but {
        width: 44upx;
        height: 44upx;
      }
    }

    .dial-plate {
      width: 486upx;
      height: 486upx;
      // background-color: #18B566;
      background-image: url(http://static.bsyjk.cn/l/91895ED9F4A3434CA15CF44867E02405.png);
      background-size: 100% 100%;
      position: relative;

      .pointer-img {
        width: 76upx;
        height: 76upx;
        position: absolute;
        top: 212upx;
        left: 188upx;
        // background-color:#0E6DFF;
        transform-origin: 71.5% 24%;
      }

      .numerical-box {
        position: absolute;
        width: 486upx;
        text-align: center;
        top: 366upx;

        .big-num {
          font-size: 34upx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #4A4A4A;
        }

        .unit-text {
          font-size: 20upx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #4A4A4A;
		  line-height: 36upx;
        }
      }


    }
  }

  //请选择时间
  .choose-time-box {
    width: 750upx;
    height: 102upx;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0upx 24upx;

    .left-text {
      font-size: 28upx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 44upx;
    }

    .right-box {
      display: flex;
      align-items: center;

      .please-choose-time {
        margin-right: 20upx;
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9B9B9B;
        line-height: 44upx;
      }

      .right-img {
        width: 18upx;
        height: 30upx;
      }
    }
  }
</style>
